body {
  background-color: rgb(223, 246, 250);
  margin: 0;
  overflow-x: hidden;
}

h1 {
  color: rgb(35, 51, 194);
  font-size: 50px;
  font-style: oblique;
  font-weight: bold;
  text-shadow: 2px 2px rgb(54, 27, 27);
}

.titulo1 {
  color: rgb(56, 7, 75);
  text-shadow: 2px 2px rgb(15, 58, 11);
  font-weight: bold;
  font-style: italic;
  border-color: red;
  padding: 2px;
  margin: 2px;
  border-style: dotted;
  text-align: center;
}

.imagen {
  border-radius: 25px;
  box-shadow: 4px 4px;
  display: flex;
  margin: auto;
  width: 30%;
  border-style: dotted;
  border-color: rgb(134, 14, 14);
  border-top: 50px;
}


#parrafo1 {
  font-family: "Saira Stencil", sans-serif;
  font-optical-sizing: auto;
  font-weight: 50;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

#parrafo2 {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

#parrafo3 {
  font-family: "Krona One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

#parrafo4 {
  font-family: "Schoolbell", cursive;
  font-weight: 400;
  font-style: normal;
}

#capital1 {
  font-family: "Great Vibes", cursive;
  font-size: 80px;
  font-style: normal;
  color: brown;

}

.menu {
  display: flex;
  padding: 20px;
  justify-content: center;
  gap: 30px;

}

.menu a {
  text-decoration: none;
  color: aliceblue;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  background-color: brown;
  padding: 2px;
  border-radius: 8px;
}

a.selecionada {
  background-color: aquamarine;
  text-shadow: 2px 2px rgb(22, 12 65);
  font-style: normal;
}

a:hover {
  background-color: blueviolet;
  color: white;
}

.borde {
  border-radius: 20px;
  box-shadow: 5px 5px rgb(54, 27, 27);
}

.borde:hover {
  animation: animacion 10ms ease forwards;
}

@keyframes animacion {
  0% {
    opacity: 10%;
  }

  50% {
    opacity: 70%;
  }

  100% {
    opacity: 100%;
  }
}

.titulo2:hover {
  animation: color 0.8s ease-out forwards
}

@keyframes color {
  0% {
    color: red;
    font-size: 50px;
  }

  100% {
    color: green;
    font-size: 60px;
  }
}

.titulo3 {
  display: inline-block;
  font-size: 3rem;
  font-weight: 900;
  font-family: sans-serif;
  background: linear-gradient(to right,
      #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #8b00ff, #ff0000);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: desplazar-y-color 6s linear infinite;
}

@keyframes desplazar-y-color {
  0% {
    transform: translateX(-100%);
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }

  100% {
    transform: translateX(100vw);
    background-position: 200% center;
  }
}

.contenedor-forma {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

.forma-animada {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: transformacion 6s infinite ease-in-out;
}

@keyframes transformacion {
  0% {
    background-color: red;
    border-radius: 0%;
    transform: scale(1);
  }

  33% {
    background-color: green;
    border-radius: 50%;
    transform: scale(1);
  }

  66% {
    background-color: purple;
    border-radius: 0%;
    transform: scale(1.1);
  }

  100% {
    background-color: red;
    border-radius: 0%;
    transform: scale(1);
  }

  0% {
    transform: translateX(0);
    background-color: red;
    border-radius: 0%;
  }

  50% {
    background-color: green;
    border-radius: 50%;
    transform: translateX(calc(50vw - 50px));
  }

  100% {
    transform: translateX(calc(100vw - 100px));
    background-color: purple;
    border-radius: 0%;
    transform: translateX(calc(100vw - 100px)) scale(1.1);
  }
}





.contenedor-contactos {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  font-family: 'Montserrat';
}

/* El encabezado azul */
.fila-header {
  display: flex;
  background-color: #2c7be5;
  color: white;
  width: 80%;
  height: 50px;
  align-items: center;
  /* CAMBIO: Solo redondeamos las esquinas superiores */
  border-radius: 8px 8px 0 0;
  font-weight: 700;
  font-size: 18px;
  border: 1px solid #2c7be5;
  /* Para que alinee con los bordes de abajo */
}

/* Filas ahora pegadas */
.fila-contacto {
  display: flex;
  background-color: white;
  width: 80%;
  height: 100px;
  margin-top: 0;
  border: 1px solid #dee2e6;
  border-top: none;
  border-radius: 0;
  transition: background-color 0.2s;
}


.fila-contacto:last-child {
  border-radius: 0 0 8px 8px;
}

.fila-contacto:hover {
  background-color: #f8f9fa;
  transform: none;
}

.dato,
.fila-header span {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  font-weight: 400;
  font-size: 16px;
}

/* Estado base del icono */
.fila-contacto i,
.fila-contacto svg {
  display: inline-block;
  transition: all 0.3s ease;
  color: #e779d9;
  /* El color de tu marca */
}

/* Efecto al hacer hover en la fila */
.fila-contacto:hover i,
.fila-contacto:hover svg {
  /* Aplicamos ambas animaciones al mismo tiempo */
  animation:
    girar-infinito 2s linear infinite,
    brillo-icon 1.5s ease-in-out infinite;

  color: #fd6cf1;
  /* Aseguramos que resalte el color */
}

@keyframes girar-infinito {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Animación de brillo (glow) */
@keyframes brillo-icon {
  0% {
    filter: drop-shadow(0 0 0px #fff) brightness(1);
  }

  50% {
    /* Ambos efectos dentro de la misma propiedad filter */
    filter: drop-shadow(0 0 10px #ee7272) brightness(1.8);
  }

  100% {
    filter: drop-shadow(0 0 0px #fff) brightness(1);
  }
}



.fila-contacto img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 0.4s ease;
  /* suavidad */
}

.fila-contacto img:hover {
  transform: scale(4);
  /* aumenta tamaño */
}







.img-animada {
  position: relative;
  animation: caer 1s ease-out;
}

@keyframes caer {
  0% {
    transform: translateY(-200px);
    opacity: 0;
  }

  60% {
    transform: translateY(20px);
    opacity: 1;
  }

  80% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}



.cccc {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}



/* Contenedor del formulario */
form {
  background-color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  width: 300px;
}

/* Etiquetas */
label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 600;
}

/* Campos de entrada (inputs) */
input[type="number"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-radius: 6px;
  box-sizing: border-box;
  /* Para que el padding no afecte el ancho total */
  transition: border-color 0.3s;
}

input[type="number"]:focus {
  border-color: #4CAF50;
  outline: none;
}

/* El botón */
input[type="button"] {
  width: 100%;
  padding: 12px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: background-color 0.3s;
}

input[type="button"]:hover {
  background-color: #45a049;
}

/* Etiqueta del resultado */
#suma {
  display: block;
  margin-top: 20px;
  padding: 10px;
  background-color: #e8f5e9;
  color: #2e7d32;
  text-align: center;
  border-radius: 6px;
  font-size: 1.1em;
}










.container {
  background: #2c7be5;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  width: 100%;
  max-width: 350px;
}

h2 {
  color: var(--text);
  text-align: center;
  margin-bottom: 1.5rem;
}

.input-group {
  margin-bottom: 1rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
}

input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s;
}

input:focus {
  border-color: var(--primary);
}

.result-box {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #eff6ff;
  border-radius: 0.5rem;
  text-align: center;
  font-weight: bold;
  color: var(--primary);
}

button {
  width: 100%;
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1rem;
}

button:hover {
  opacity: 0.9;
}



#triangulo-dibujo {
    width: 0;
    height: 0;
    border-left: 9px solid transparent;  /* Cambiará con JS */
    border-right: 0px solid transparent; /* Cambiará con JS */
    border-bottom: 0px solid #151618;    /* Cambiará con JS */
    transition: all 0.5s ease-out;       /* Para que el triángulo "crezca" suavemente */
}

.btn-calcular{
opacity: 0.9;
}